<template>
  <div class="task-tracking">
    <div class="task-tracking-item">
      <div class="name-block">
        <div class="name">反诈宣传任务（责任人：民警马艳梅）</div>
        <div class="status">进行中</div>
      </div>
      <div class="percent">67%</div>
      <el-progress color="#32B4FF" define-back-color="#0B2F51" :stroke-width="12" :show-text="false" :percentage="67"></el-progress>
    </div>
    <div class="task-tracking-item">
      <div class="name-block">
        <div class="name">民法典普及（责任人：司法所陈国皇）</div>
        <div class="status">进行中</div>
      </div>
      <div class="percent">67%</div>
      <el-progress color="#32B4FF" define-back-color="#0B2F51" :stroke-width="12" :show-text="false" :percentage="67"></el-progress>
    </div>
  </div>
</template>
<script>
export default {
  name: 'TaskTracking'
}
</script>
<style scoped lang="scss">
.task-tracking{
  width: 100%;
  height: 100%;
  .task-tracking-item{
    width: 100%;
    height:calc(50% - 10px);
    margin-bottom: 20px;
    .name-block{
      width: 100%;
      display: flex;
      align-items: center;
      .name{
        flex-grow: 1;
        color: #fff;
        font-size: 14px;
      }
      .status{
        border: 1px solid #32B4FF;
        color: #32B4FF;
        background: rgba(50, 180, 255, 0.2);
        border-radius: 5px;
        padding: 2px 7px;
        font-size: 12px;
      }
    }
    .percent{
      color: #32B4FF;
      font-size: 14px;
      margin: 10px 0;
    }

    &:last-child{
      margin-bottom: 0;
      .status{
        border-color: #FED52F;
        color: #FED52F;
        background: rgba(254, 213, 47, 0.2);
      }
    }
  }
}
</style>
